<template>
  <div class="view-fill">
    <div v-if="!dialogInfo.visible" class="app-container-flex">
      <NewFullScreen
        v-model="showDialog"
        :btn-list="btnList"
        title="厂家明细"
        @returnBack="returnBack"
      >
        <div class="model-panel">
          <div class="model-panel-title">
            <p>{{ $t('basic_information') }}</p>
          </div>
          <div class="model-panel-body">
            <!-- form -->
            <basic-information :info="basicInfo">
              <template v-slot:basic-brandLicenseFilePaths>
                <ele-gallery
                  v-if="basicInfo.data.brandLicenseFilePaths"
                  :lazy="true"
                  :remove-fn="handleRemove"
                  :size="150"
                  :source="basicInfo.data.brandLicenseFilePaths"
                  title="资质"
                />
                <span v-else>-</span>
              </template>
            </basic-information>
          </div>
        </div>
      </NewFullScreen>
    </div>
    <Modify
      v-if="dialogInfo.visible"
      :id="dialogInfo.id"
      v-model:visible="dialogInfo.visible"
      :title="dialogInfo.title"
      :type="dialogInfo.type"
      @returnBack="getMain"
    />
  </div>
</template>

<script setup name="brandDetails">
import BasicInformation from '@/components/BasicInformation/index'
import { brandDetail } from '@/api/core'

import EleGallery from '@/components/UploadImg/eleGallery'
import Modify from './modify'
const emits = defineEmits()
const props = defineProps({
  disabled: {
    type: Boolean,
    default: false,
  },
  id: {
    type: String,
  },
})
const btnList = ref([{ label: '修改', event: update, show: true }])
const basicInfo = ref({
  data: {},
  fieldList: [
    { label: '厂家名称', value: 'name' },
    { label: '厂家编码', value: 'code' },
    { label: '营业执照', value: 'businessLicense' },
    { label: '医疗器械生产许可', value: 'medicalDeviceLicense' },
    {
      label: '医疗器械生产备案',
      value: 'firstMedicalDeviceFiling',
    },
    { label: '卫生许可证', value: 'sanitaryLicense' },
    { label: '经营许可证', value: 'operatingPermit' },
    { label: '创建时间', value: 'createTime' },
    { label: '创建人', value: 'createUserName' },
    { label: '更新时间', value: 'updateTime' },
    { label: '更新人', value: 'updateUserName' },
    { label: '备注', value: 'remark', type: 'popover' },
    {
      label: '资质',
      value: 'brandLicenseFilePaths',
      type: 'slot',
      className: 'not-br',
    },
  ],
})

// 弹窗相关
const dialogInfo = ref({
  title: '',
  id: '',
  visible: false,
  type: '',
})

const showDialog = computed({
  get() {
    return props.visible
  },
  set(val) {
    // 更新父组件visible
    emits('update:visible', val)
  },
})
const value = ref(null)
const computedValues = computed(() => {
  if (value.value) {
    if (typeof value.value === 'string') {
      return [value.value]
    } else {
      return [...value.value]
    }
  } else {
    return []
  }
})
function returnBack() {
  emits('returnBack')
}
// 编辑
function update() {
  dialogInfo.value = {
    title: '修改厂家',
    visible: true,
    type: 'update',
    id: props.id,
  }
}
function getMain() {
  brandDetail(props.id).then((resp) => {
    if (resp) {
      basicInfo.value.data = resp.data
    }
  })
}
const multiple = ref(null)
function handleRemove(index) {
  if (multiple.value) {
    const data = [...computedValues.value]
    data.splice(index, 1)
    emits('input', data || [])
  } else {
    emits('input', null)
  }
}

onMounted(() => {
  if (props.id) {
    getMain()
  }
})
</script>

<style scoped></style>
